<template>
	<view class="page_login">
		<!-- 头部logo -->
		<view class="head">
			<view class="head_bg">
				<view class="head_inner_bg">
					<image style="width: 55px;height: 55px;" :src="imgInfo.head" class="head_logo" />
				</view>
			</view>
		</view>
		<form  @submit="formSubmit">
			<!-- 登录form -->
			<view class="login_form">
				
				<view class="input">
					<view class="img">
						<view class="iconfont icon-credentials_icon  "></view>  
					</view>
					<input type="text" @blur="blur_imput" name="phone" v-model="username" placeholder="手机号码" >
				</view>
				<view class="line" />
				<view class="input">
					<view class="img">
						<view class="iconfont icon-suo  "></view>  
					</view>
					<input :type="pwdType" name="pwd" @blur="blur_imput"  :value="userpwd" @input="inputPwd" placeholder="登录密码">
					<view class="img" @tap="switchPwd">
						<image class="img_pwd_switch" :src="imgInfo.icon_pwd_switch" />
					</view>
				</view>
			</view>
			<!-- 登录提交 -->
			<button class="submit" type="primary"  formType="submit" >登录</button>
		
		
		</form>
		
		<view class="opts">
			<text @tap="goReg" class="text">立即注册</text>
			<text @tap="findPwd" class="text">忘记密码？</text>
		</view>
		<!-- #ifdef APP-PLUS -->
		<!-- <view class="quick_login_line">
			<view class="line" />
			<text class="text">快速登录</text>
			<view class="line" />
		</view>
		<view class="quick_login_list"> -->
			<!-- <image @tap="thirdLogin('qq')" class="item" :src="imgInfo.qq" /> -->
			<!-- <image @tap="thirdLogin('wechat')" class="item" :src="imgInfo.wechat" /> -->
			<!-- <image @tap="thirdLogin('weibo')" class="item" :src="imgInfo.weibo" /> -->
		<!-- </view> -->
		<!-- #endif -->
		
	</view>
</template>
<script>
	 import {
        mapMutations
    } from 'vuex';
	//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
	var  graceChecker = require("../../common/graceChecker.js");
	export default {

		data() {
			const isUni = typeof(uni) !== 'undefined'
			return {
				username: '',
				userpwd: '',
				phone: '',
				pwd: '',
				pwdType: 'password',
				imgInfo: {
					head: isUni ? '/static/head.png' : require('./images/head.png'),
					icon_user: isUni ? '/static/icon_user.png' : require('./images/icon_user.png'),
					icon_del: isUni ? '/static/icon_del.png' : require('./images/icon_del.png'),
					icon_pwd: isUni ? '/static/icon_pwd.png' : require('./images/icon_pwd.png'),
					icon_pwd_switch: isUni ? '/static/icon_pwd_switch.png' : require('./images/icon_pwd_switch.png'),
					qq: isUni ? '/static/qq.png' : require('./images/qq.png'),
					wechat: isUni ? '/static/wechat.png' : require('./images/wechat.png'),
					weibo: isUni ? '/static/weibo.png' : require('./images/weibo.png')
				}
			}
		},
		onLoad() {
			
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//输入框失去焦点收起软键盘
			blur_imput(){
				uni.pageScrollTo({
					scrollTop:0,
					duration:0
				})
			},
			formSubmit(e) {
				
				// 将下列代码加入到对应的检查位置
				// 定义表单规则
				var rule = [
					{name:"phone", checkType : "phoneno",  errorMsg:"请输入正确的手机号"},
					{name:"pwd", checkType : "String", checkRule: "(5,16)",  errorMsg:"密码格式不正确"},
				];
				//进行表单检查
				var formData = e.detail.value;
				
				var checkRes = graceChecker.check(formData, rule);
				if(checkRes){
					uni.showLoading({
						title: '请稍后'
					})
					//通过保存用户信息方法
					this.SIGNATURE = uni.getStorageSync("SIGNATURE");
					//验证通过以后向后台发送请求
					this.$http.post('/user/login',{
						PHONE : e.detail.value.phone,
						SIGNATURE : this.SIGNATURE,
						PASSWORD : e.detail.value.pwd,
					}).then((res)=>{
						console.log(res);
						//判断返回内容
						if(res.data.STATE === "0" && res.statusCode === 200){
							//成功后页面跳转   关闭所有页面，跳转到登录页面
							this.login(res.data.OBJECT);
							uni.hideLoading();
							uni.reLaunch({
								url: "/pages/index/index"
							})
						}else {
							uni.hideLoading();
							uni.showToast({
								title: res.data.MSG,
								icon: "none",
							})
						}
					})
					.catch((err)=>{
						uni.hideLoading();
					    console.log('request fail', err);
					})
				}else{
					
					uni.showToast({ title: graceChecker.error, icon: "none" });
				}
			},
			...mapMutations(['login']),
			inputUsername(e) {
				this.username = e.target.value
			},
			inputPwd(e) {
				this.userpwd = e.target.value
			},
			delUser() {
				this.username = ''
			},
			switchPwd() {
				this.pwdType = this.pwdType === 'text' ? 'password' : 'text'
			},
			
			findPwd() {
				uni.navigateTo({
					url:'/pages/find-pwd/find-pwd'
				})
			},
			goReg() {
				if(uni.getStorageSync("inviteid")==''){
					uni.navigateTo({
						url:'/pages/reg/reg1'
					})
				}else{
					uni.navigateTo({
						url:'/pages/reg/reg?userId='+uni.getStorageSync("inviteid")
					})
				}
				
			},
			thirdLogin(type) {
				
				
				console.log(type)
				//#ifdef MP-WEIXIN
					uni.navigateTo({
						url:'/pages/public/wechatLogin/wechatLogin'
					})
				//#endif
				
			}
		}
	}
</script>
<style>
	
	page {
		height: auto;
		min-height: 100%;
		background-color: #f5f6f8;
	}
</style>
<style lang="scss" scoped>
	
	$logo-padding: 85upx;
	$form-border-color: rgba(214, 214, 214, 1);
	$text-color: #E02E24;

	.page_login {
		padding: 10upx;
	}

	.head {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: $logo-padding;
		padding-bottom:60upx;
		
		.head_bg {
			align-items: center;
			justify-content: center;

			.head_inner_bg {
				border-radius: 80upx;
				width: 156upx;
				height: 160upx;
				display: flex;
				background-color: #E02E24;
				align-items: flex-end;
				justify-content: center;
				overflow: hidden;
			}
		}
	}
	.iconfont{
		font-size: 50upx;
		color: #E02E24;
		margin-left: 20upx;
	}
	.login_form {
		display: flex;
		margin: 0 96upx 96upx 96upx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// border: 1px solid $form-border-color;
		// border-radius: 20px;
// 
// 		.line {
// 			width: 100%;
// 			height: 1px;
// 			background-color: $form-border-color;
// 		}

		.input {
			border-bottom: 1px solid $form-border-color;
			width: 100%;
			height: 100upx;
			// max-height: 88upx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			
			.img {
				min-width: 60upx;
				width: 40upx;
				height: 40upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.img_del {
				padding-right: 10upx;
				width: 60upx;
				height: 50upx;
			}

			.img_pwd_switch {
				width: 74upx;
				height: 30upx;
			}

			input {
				outline: none;
				height: 100upx;
				padding-left: 46upx;
				width: 100%;
				font-size: 28upx;
				font-family: 'ArialMT', 'Arial';
				font-weight: 400;

				&:focus {
					outline: none;
				}
			}
		}
	}

	.submit {
		margin-top: 0upx;
		margin-left: 93upx;
		margin-right: 93upx;
		border-radius: 80upx;
		height: 88upx;
		color: #ffffff;
		font-family: '微软雅黑';
		font-weight: 400;
		font-style: normal;
		font-size: 32upx;
		background-color: $text-color;
		-webkit-tap-highlight-color: #CC5656;
		&:active {
			color: #B6B6B6;
			background-color: #CC5656;
		}
	}

	.opts {
		margin-top: 60upx;
		margin-left: 80upx;
		margin-right: 80upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		
		.text {
			font-family: '微软雅黑';
			font-weight: 410;
			font-style: normal;
			font-size: 28upx;
			color: $text-color;
			
			// color: $text-color;
		}
	}

	.quick_login_line {
		margin-top: 80upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		.line {
			height: 2upx;
			width: 38%;
			background-color: rgba(211, 211, 213, 1);
		}

		.text {
			font-size: 26upx;
			color: rgba(200, 200, 200, 1);
			margin: 4upx;
		}
	}

	.quick_login_list {
		margin-top: 40upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		.item {
			width: 100upx;
			height: 100upx;
			margin: 40upx;
		}
	}
</style>
